<script setup>
  // 1. 导入counter文件中定义的方法
  import { useCounterStore } from '@/stores/counter'
  import {onMounted} from "vue";
  import {storeToRefs} from "pinia";
  // 2. 执行方法得到store实例对象
  const counterStore = useCounterStore();
  console.log(counterStore)

  // 属性直接解构响应式丢失, 需要使用到 storeToRefs
  // 如果直接在 template 中使用 counterStore.count 这种方式是支持响应式的,但是如果你将属性结构出来后,那么他就不支持了需要使用到 storeToRefs 方法
  // const { count, doubleCount } = counterStore
  // console.log(count, doubleCount)

  const { count, doubleCount } = storeToRefs(counterStore)
  console.log(count, doubleCount)

  // 方法还是可以通过 counterStore 直接获取, 只有属性不能直接解构
  const { increment } = counterStore

  onMounted(() => {
    counterStore.getList()
  })

</script>

<template>
  <button @click="increment">{{ count }}</button> | {{ doubleCount }}
</template>

<style scoped>

</style>
